<template>
	<view>
		<view class="uni-title">
			align-content: stretch 
		</view>
		<view class="uni-flex uni-column" :style="'height:'+screenHeight+'px;'">
			<view class="flex-item-1 uni-bg-red">
				<view class="flex-item-1c">A1</view>
				<view class="flex-item-1c">A2</view>
			</view>
			<view class="flex-item-2 uni-bg-green">
				<view class="flex-item-2c">B1</view>
				<view class="flex-item-2c">B2</view>
				<view class="flex-item-2c">B3</view>
			</view>
			<view class="flex-item-3 uni-bg-blue">
				<view class="flex-item-3c">A</view>
				<view class="flex-item-3c">B</view>
				<view class="flex-item-3c">C</view>
				<view class="flex-item-3a">D</view>
				<view class="flex-item-3a">E</view>
				<view class="flex-item-3a">F</view>
				<view class="flex-item-3a">G</view>
				<view class="flex-item-3a">H</view>
				<view class="flex-item-3a">I</view>
				<view class="flex-item-3d">J</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenWidth: 640,
				screenHeight: 960,
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: res => {
					this.screenWidth = res.windowWidth;
					this.screenHeight = res.windowHeight- res.statusBarHeight;
					console.log(res.windowHeight);
					console.log(res.statusBarHeight);
				},
			});
		},
		methods: {

		}
	}
</script>

<style>
	.uni-flex {
		display: flex;
		height: 1080rpx;
		flex-direction: row;
	}

	.uni-flex-item {
		flex: 1;
	}

	.uni-row {
		flex-direction: row;
	}

	.uni-column {
		flex-direction: column;
	}

	.uni-center {
		text-align: center;
	}

	.uni-inline-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-item {
		width: 33.3%;
		height: 450rpx;
		text-align: center;
		line-height: 450rpx;
	}

	.flex-item-1 {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		/* align-content:flex-end; */
	}

	.flex-item-1c {
		height: 80%;
		flex: 1;
		max-width: 30%;
		margin: 2px;
		border: 2px solid white;
	}

	.flex-item-2 {
		width: 100%;
		flex: 1;
		display: flex;
		justify-content: space-around;
		flex-direction: row;
	}

	.flex-item-2c {
		height: 80%;
		max-width: 20%;
		flex: 1;
		margin: 2px;
		border: 2px solid white;
	}

	.flex-item-3 {
		width: 100%;
		flex: 4;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: flex-start;
		align-content:stretch ;
	}

	.flex-item-3c {
		height: 20%;
		min-width: 30%;
		flex: 1;
		margin: 2px;
		border: 2px solid white;
	}

	.flex-item-3a {
		height: 20%;
		width: 20%;
		margin: 2px;
		border: 2px solid white;
	}
	
	.flex-item-3d {
		height: 20%;
		width: 80%;
		margin: 2px;
		border: 2px solid white;
	}
</style>
